<template>
  <base-view :model="query" @submit="search" class="custom">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="商圈编号">
          <a-input v-model="query.tradeAreaCode" placeholder="请输入商圈编号" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="商圈名称">
          <a-input v-model="query.tradeAreaName" placeholder="请输入商圈名称" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="机构代码">
          <a-input v-model="query.belongInstId" placeholder="请输入机构代码" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="商圈状态">
          <a-select placeholder="请选择商圈状态" v-model="query.tradeAreaStatus">
            <a-select-option value="">-请选择-</a-select-option>
            <a-select-option value="00">非正式</a-select-option>
            <a-select-option value="01">正式</a-select-option>
            <a-select-option value="03">已注销</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item class="search">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button type="primary" @click="openModal()">
          <a-icon type="plus" />
          <span>增加</span>
        </a-button>
      </div>
      <a-table ref="table" :columns="columns" :dataSource="dataSource" :rowKey="
        (record, index) => {
          return index;
        }
      " :loading="loading" :pagination="pagination" @change="pageChange" @showSizeChange="pageChange"
        :scroll="{ x: 1200 }">
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改"
            v-if="record.tradeAreaStatus !== '03'"></a-icon>
          <a-icon v-has-permission="['tradeArea:view']" type="eye" theme="twoTone" twoToneColor="#4a9ff5"
            @click="view(record)" title="查看"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" @click="cancel(record)" title="注销"
            v-if="record.tradeAreaStatus !== '03'"></a-icon>
          <a-badge v-has-no-permission="[
            'tradeArea:update',
            'tradeArea:view',
            'tradeArea:delete',
          ]" status="warning" text="无权限"></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" width="1050px" @ok="submit()" :maskClosable="false"
      :footer="isHideFoot ? null : undefined">
      <trade-area-operation ref="modalForm"></trade-area-operation>
    </a-modal>
  </base-view>
</template>

<script>
import RangeDate from "../../../../components/datetime/RangeDate";
import TradeAreaOperation from "./TradeAreaOperation";
import { mapState } from "vuex"

export default {
  name: "TradeArea",
  components: { TradeAreaOperation, RangeDate },
  data: function () {
    return {
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "新增商圈信息",
      operationType: "view",
      query: {
        instId: "",
        tradeAreaCode: "",
        tradeAreaName: "",
        belongInstId: "",
        tradeAreaStatus: "",
      },
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "商圈编号",
          dataIndex: "tradeAreaCode",
          width: 120,
        },
        {
          title: "商圈名称",
          dataIndex: "tradeAreaName",
          width: 120,
        },
        {
          title: "商圈描述",
          dataIndex: "tradeAreaDesc",
          width: 120,
        },
        {
          title: "所属机构代码",
          dataIndex: "belongInstId",
          width: 120,
        },
        {
          title: "所属机构名称",
          dataIndex: "belongInstName",
          width: 120,
        },
        {
          title: "所属地区代码",
          dataIndex: "belongAreaCode",
          width: 120,
        },
        {
          title: "所属地区名称",
          dataIndex: "belongAreaName",
          width: 120,
        },
        {
          title: "法人行",
          dataIndex: "instId",
          width: 120,
        },
        {
          title: "审批状态",
          dataIndex: "auditStatus",
          width: 120,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "待提交审批";
              case "01":
                return "新增-审批流程中";
              case "02":
                return "新增-审批通过";
              case "03":
                return "新增-审批拒绝";
              case "41":
                return "修改-审批流程中";
              case "42":
                return "修改-审批通过";
              case "43":
                return "修改-审批拒绝";

              case "21":
                return "停用-审批流程中";
              case "22":
                return "停用-审批通过";
              case "23":
                return "停用-审批拒绝";

              case "31":
                return "启用-审批流程中";
              case "32":
                return "启用-审批通过";
              case "33":
                return "启用-审批拒绝";

              case "11":
                return "注销-审批流程中";
              case "12":
                return "注销-审批通过";
              case "13":
                return "注销-审批拒绝";
            }
          },
        },
        {
          title: "商圈状态",
          dataIndex: "tradeAreaStatus", //00-03 非正式 正式 停用 已注销
          width: 120,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "非正式";
              case "01":
                return "正式";
              case "02":
                return " 停用";
              case "03":
                return "已注销";
            }
          },
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      dataSource: [],
    };
  },
  computed: {
    ...mapState({
      currentUser: state => state.account.user
    })
  },
  methods: {
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.pageNum = this.pagination.defaultCurrent;
        this.pagination.pageSize = this.pagination.defaultPageSize;
        await this.search();
      }
    },
    async reset() {
      // this.query = {instId:this.query.instId}
      this.query = {}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      if (!this.currentUser.admin) {
        this.query.instId = this.currentUser.instId;
        await this.search();
      }
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        const res = await this.$get("/admin/merParam/tradeAreaInfo/list", {
          instId: this.query.instId,
          tradeAreaCode: this.query.tradeAreaCode,
          tradeAreaName: this.query.tradeAreaName,
          belongInstId: this.query.belongInstId,
          tradeAreaStatus: this.query.tradeAreaStatus,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    openModal(type = "add", beanInfo) {
      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        cancel: "注销",
      }[type];
      this.modalVisible = true;
      if (type === 'view') {
        this.isHideFoot = true;
      } else {
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        this.$refs.modalForm.setBeanInfo(beanInfo, this.query.instId);
        this.$refs.modalForm.resetFields();
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    cancel(item) {
      this.openModal("cancel", item);
    },
    pageChange(e) {
      console.log(e,'000000');
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
  },
};
</script>

<style scoped>
.page {
  width: 100%;
}

.section {
  background: #fff;
}

.form {
  text-align: center;
}

.btn-group {
  margin-bottom: 20px;
}
</style>
